<template>
  <div @click="toplaylist" class="item">
    <div class="img">
      <img
        :src="item.coverImgUrl + '?imageView=1&type=webp&thumbnail=247x0'"
        alt=""
      />
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
          <path
            fill-rule="evenodd"
            fill="#040000"
            d="M22 16.777c0 1.233-1.121 2.233-2.506 2.233-1.384 0-2.506-1-2.506-2.233v-2.553c0-1.234 1.122-2.233 2.506-2.233.174 0 .343.017.506.046v-1.37h-.033c.017-.22.033-.441.033-.666a8 8 0 0 0-16 0c0 .225.016.446.034.666H4v1.37c.163-.029.333-.046.505-.046 1.384 0 2.506.999 2.506 2.233v2.553c0 1.233-1.122 2.233-2.506 2.233S2 18.011 2 16.777v-2.553c0-.258.059-.501.148-.73A.982.982 0 0 1 2 13.001v-2.667c0-.023.012-.043.013-.067-.004-.088-.013-.176-.013-.266 0-5.523 4.477-10 10-10s10 4.477 10 10c0 .09-.009.178-.014.266.002.024.014.044.014.067v2a.988.988 0 0 1-.36.753c.224.334.36.72.36 1.138v2.552"
            opacity=".15"
          />
          <path
            fill-rule="evenodd"
            fill="#fff"
            d="M20 16.777c0 1.233-1.121 2.233-2.506 2.233-1.384 0-2.506-1-2.506-2.233v-2.553c0-1.234 1.122-2.233 2.506-2.233.174 0 .343.017.506.046v-1.37h-.033c.017-.22.033-.441.033-.666a8 8 0 0 0-16 0c0 .225.016.446.034.666H2v1.37c.163-.029.333-.046.505-.046 1.384 0 2.506.999 2.506 2.233v2.553c0 1.233-1.122 2.233-2.506 2.233S0 18.011 0 16.777v-2.553c0-.258.059-.501.148-.73A.982.982 0 0 1 0 13.001v-2.667c0-.023.012-.043.013-.067-.004-.088-.013-.176-.013-.266 0-5.523 4.477-10 10-10s10 4.477 10 10c0 .09-.009.178-.014.266.002.024.014.044.014.067v2a.988.988 0 0 1-.36.753c.224.334.36.72.36 1.138v2.552"
          />
        </svg>
        <span>{{ item.playCount | countFilter }}</span>
      </div>
    </div>
    <p>{{ item.name }}</p>
  </div>
</template>

<script>
export default {
  name: "CardComponent",
  props: {
    item: {
      type: Object,
    },
  },
  filters: {
    countFilter(val) {
      return val / 10000 < 0
        ? val
        : (val / 100000000).toFixed(1) > 0
        ? (val / 100000000).toFixed(1) + "亿"
        : (val / 10000).toFixed(1) + "万";
    },
  },
  methods:{
    toplaylist(){
      this.$router.push("/playlist?id="+this.item.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.item {
  width: 1.23rem;
  margin-bottom: 0.16rem;
}
.img {
  position: relative;
  width: 100%;
  height: 1.22rem;
  > div {
    position: absolute;
    top: 0;
    right: 0.04rem;
    font-size: 0.12rem;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    > svg {
      width: 0.12rem;
      height: 0.12rem;
    }
  }
}
p {
  word-wrap: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding: 0.06rem 0.02rem 0 0.06rem;
  min-height: 0.3rem;
  line-height: 1.2;
  font-size: 0.13rem;
  box-sizing: border-box;
  width: 100%;
}
</style>